JQ 的 DOM 存取方式是透過 selector 來達到索引目標，會先轉換為 jQuery 之元件來取得後續行為。選取元件的方式範圍廣泛，主要概念採用了同於 CSS 的層級觀念。
基本的選擇器寫法:
$(selector)
selector 為文字串格式，方式如下：
selector 可以是全部，tagName,id,class…也能多選 selector，像是#one,#two 這樣同時多種不同對象合併選取，也能將外部的自身物件用 this 指定
| selector（選取） | 說明 |
|---|---|
| $(“*”) | 所有的 HTML 都列入選取 |
| $(“p”) | 找到 element 為 p 標籤之選取 |
| $(“#header”) | 找到 id 為”header”之選取 |
| $(“.hot”) | 找到 class 為”myclass”之選取 |
| $(“#one,#two”) | 多選 (or) 對象，譬如找#one 或#two，使一起共同選擇 |
| $(“#one”).add(“#two”) | 多選 (or) 對象，譬如找#one 或#two，使一起共同選擇 |
| $(this) | 同 JavaScript 觀念，傳入前一個外部元件的本體 |
用CSS的選擇器為觀念，使用節點層級做選取，彈性容易取得
| 選取的層級觀念 | 說明 |
|---|---|
| $(“h1#header”) | 找到該 h1 且 id=header |
| $(“ul li”) | 找到該 ul 位置之子孫層級的標籤 li |
| $(“ul>li”) | 找到該 ul 位置之子層級的標籤 li |
多筆結果下，能進行不同過濾篩選條件
| 篩選條件 | 說明 |
|---|---|
| $(“li:not(.hot)”)、$(“li”).not(“.hot”) | 找到 li 標籤對象且該標籤不能有.hot |
| $(“li:first”)、$(“li”).first() | 找到 li 標籤對象之第一筆 |
| $(“li:last”)、$(“li”).last() | 找到 li 標籤對象之最後筆 |
| $(“li:even”) | 找到 li 標籤對象之偶數筆 |
| $(“li:odd”) | 找到 li 標籤對象之奇數筆 |
| $(“li:eq(n)”)、$(“li”).eq(n) | 找到 li 標籤對象之第 n 筆，初值=0 |
| $(“li:contains(‘我’)”) | 找到 li 標籤內含文字”我”之選取 |
| $(“ul:has(li)”)、$(“ul”).has(“li”) | 找到 ul 標籤且持有 li 之選取（取 ul) |
能根據 tag 裡面的屬性 (attr) 做選取，透過多種比較式去檢查布林條件
| 篩選依屬性 | 說明 |
|---|---|
| $(“input[type=button]”) | 找到 input 標籤且 type 為 button |
| $(“input[type!=button]”) | 找到 input 標籤且 type 不是 button |
| $(“input[value^=aa]”) | 找到 input 標籤且 value 開頭為 aa |
| $(“input[value$=aa]”) | 找到 input 標籤且 value 結尾為 aa |
| $(“input[value*=aa]”) | 找到 input 標籤且 value 中間為 aa |
| $(“input[value/=aa]”) | 找到 input 標籤且 value 開頭為aa- |
| $(“input[type=button][value=”is loki”]”) | 找到符合多筆屬性值 |
tagName 是 input 相關的互動表單型，能透過：type 去找到，也包含 checked 或 selectd 性質
| 選擇為表單類型 | 說明 |
|---|---|
| $(“:input”) | 所有輸入項目都中 |
| $(“:text”) | 所有 input:text 都中 |
| $(“:checked”) | 所有被勾選 checked 的都中 |
iThome鐵人賽
看影片追技術